<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师管理系统 - Vue版</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!--script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script-->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: #f5f7fa;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            color: #333;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, #2c3e50, #1a2530);
            color: white;
            padding: 12px 25px;
            position: relative;
            z-index: 100;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo-container img {
            height: 40px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        .logo-container h1 {
            font-size: 1.6rem;
            font-weight: 600;
            color: white;
        }

        .user-info-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            font-weight: bold;
            color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .user-avatar:hover {
            transform: scale(1.05);
            background: #2980b9;
        }

        .dropdown-menu {
            position: absolute;
            top: 60px;
            right: 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            width: 200px;
            overflow: hidden;
            z-index: 1000;
            display: none;
        }

        .dropdown-menu.show {
            display: block;
        }

        .dropdown-header {
            padding: 12px;
            background: #f8f9fa;
            border-bottom: 1px solid #eee;
        }

        .dropdown-header h4 {
            font-size: 1rem;
            color: #2c3e50;
            margin-bottom: 5px;
        }

        .dropdown-header p {
            font-size: 0.85rem;
            color: #777;
        }

        .dropdown-item {
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #555;
            font-size: 0.95rem;
        }

        .dropdown-item:hover {
            background: #f0f7ff;
            color: #3498db;
        }

        .dropdown-item i {
            width: 20px;
            text-align: center;
            font-size: 0.9rem;
        }

        .dropdown-divider {
            height: 1px;
            background: #eee;
            margin: 5px 0;
        }

        .logout-btn {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 7px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.95rem;
        }

        .logout-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
        }

        .container {
            display: flex;
            flex: 1;
            padding: 15px;
            max-width: 1600px;
            margin: 0 auto;
            width: 100%;
            gap: 15px;
        }

        .sidebar {
            width: 220px;
            background: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            height: fit-content;
        }

        .sidebar-header {
            padding: 12px 10px;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .sidebar-header i {
            font-size: 1.2rem;
            color: #3498db;
        }

        .sidebar-header h2 {
            color: #2c3e50;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .sidebar ul {
            list-style: none;
            padding: 0;
        }

        .sidebar ul li {
            margin: 8px 0;
        }

        .sidebar ul li a {
            text-decoration: none;
            color: #555;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 15px;
            border-radius: 8px;
            transition: all 0.3s ease;
            font-size: 1rem;
            font-weight: 500;
        }

        .sidebar ul li a:hover {
            background: #f0f7ff;
            color: #3498db;
        }

        .sidebar ul li a.active {
            background: #e1f0ff;
            color: #2980b9;
            font-weight: 600;
        }

        .sidebar ul li a i {
            font-size: 1.1rem;
            width: 22px;
            text-align: center;
        }

        .main-content {
            flex: 1;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .welcome-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeaea;
        }

        .welcome-header h2 {
            color: #2c3e50;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .welcome-header h2 i {
            color: #3498db;
            background: #e1f0ff;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
        }

        .class-selector {
            display: flex;
            align-items: center;
            gap: 12px;
            background: #f0f7ff;
            padding: 12px 15px;
            border-radius: 8px;
            width: fit-content;
        }

        .class-selector label {
            font-weight: 500;
            color: #2980b9;
            font-size: 0.95rem;
        }

        .class-selector select {
            padding: 8px 15px;
            border: 1px solid #cce5ff;
            border-radius: 6px;
            background: white;
            font-size: 0.95rem;
            color: #2c3e50;
            width: 180px;
            appearance: none;
            background-repeat: no-repeat;
            background-position: calc(100% - 12px) center;
            background-size: 12px;
            padding-right: 35px;
        }

        .section {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);
            border: 1px solid #eaeaea;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .section-header h3 {
            color: #2c3e50;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .action-btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }

        .action-btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
        }

        .class-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .class-card {
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);
            border: 1px solid #eaeaea;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .class-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
            border-color: #cce5ff;
        }

        .class-card h4 {
            color: #2c3e50;
            font-size: 1.2rem;
            margin-bottom: 8px;
        }

        .class-card p {
            color: #555;
            margin: 4px 0;
            font-size: 0.9rem;
        }

        .class-card .class-meta {
            display: flex;
            justify-content: space-between;
            margin-top: 4px;
            padding-top: 8px;
            border-top: 1px solid #f0f7ff;
        }

        .class-card .class-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }

        .class-card button {
            flex: 1;
            background: #e1f0ff;
            color: #2980b9;
            border: none;
            padding: 7px 12px;
            border-radius: 18px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }

        .class-card button:hover {
            background: #3498db;
            color: white;
        }

        .data-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03);
            background: white;
            border: 1px solid #eaeaea;
            margin-top: 12px;
            font-size: 0.95rem;
        }

        .data-table th {
            background: #3498db;
            color: white;
            padding: 14px 12px;
            text-align: left;
            font-weight: 500;
            font-size: 0.95rem;
        }

        .data-table th:first-child {
            border-top-left-radius: 8px;
        }

        .data-table th:last-child {
            border-top-right-radius: 8px;
        }

        .data-table td {
            padding: 12px;
            border-bottom: 1px solid #f0f7ff;
            color: #555;
        }

        .data-table tr:last-child td {
            border-bottom: none;
        }

        .data-table tr:nth-child(even) {
            background-color: #f9fcff;
        }

        .data-table tr:hover {
            background-color: #f0f7ff;
        }

        .data-table .status-badge {
            padding: 4px 10px;
            border-radius: 18px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .status-pending {
            background-color: #fff8e6;
            color: #f39c12;
        }

        .status-submitted {
            background-color: #e6f7e9;
            color: #27ae60;
        }

        .data-table button {
            background: #e1f0ff;
            color: #2980b9;
            border: none;
            padding: 7px 12px;
            border-radius: 18px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }

        .data-table button:hover {
            background: #3498db;
            color: white;
        }

        .grade-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 18px;
            font-weight: 600;
            background: #e1f0ff;
            color: #2980b9;
            font-size: 0.9rem;
        }

        .progress-bar {
            height: 5px;
            background: #e0edf8;
            border-radius: 3px;
            overflow: hidden;
            margin-top: 4px;
        }

        .progress {
            height: 100%;
            background: #3498db;
            border-radius: 3px;
        }

        /* Vue加载状态样式 */
        .loading-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 180px;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(52, 152, 219, 0.3);
            border-radius: 50%;
            border-top-color: #3498db;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* 响应式设计 */
        @media (max-width: 800px) {
            .container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                margin-bottom: 15px;
            }
        }

        @media (max-width: 668px) {
            .navbar {
                padding: 10px 12px;
            }

            .logo-container h1 {
                font-size: 1.3rem;
            }

            .welcome-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .class-selector {
                width: 100%;
            }

            .section-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .action-btn {
                width: 100%;
                justify-content: center;
            }

            .class-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <div class="navbar">
            <div class="logo-container">
                <img src=""
                    alt="LOGO">
                <h1>教师管理系统</h1>
            </div>

            <div class="user-info-container">
                <div class="user-avatar" @click="toggleDropdown">{{ userInitials }}</div>
                <div class="dropdown-menu" :class="{show: isDropdownOpen}">
                    <div class="dropdown-header">
                        <h4>{{ user.name }}</h4>
                    </div>
                    <div class="dropdown-item" @click="editProfile">
                        <i class="fas fa-user-edit"></i>编辑个人信息
                    </div>
                    <div class="dropdown-item" @click="changePassword">
                        <i class="fas fa-key"></i>修改密码
                    </div>
                    <div class="dropdown-divider"></div>
                    <div class="dropdown-item" @click="logout">
                        <i class="fas fa-sign-out-alt"></i>退出登录
                    </div>
                </div>
                <button class="logout-btn" @click="logout">
                    <i class="fas fa-sign-out-alt"></i> 退出
                </button>
            </div>
        </div>

        <!-- 页面容器 -->
        <div class="container">
            <!-- 侧边栏 -->
            <div class="sidebar">
                <div class="sidebar-header">
                    <i class="fas fa-chalkboard-teacher"></i>
                    <h2>教师控制台</h2>
                </div>
                <ul>
                    <li v-for="(item, index) in menuItems" :key="index">
                        <a href="#" :class="{active: activeMenu === item.id}" @click.prevent="setActiveMenu(item.id)">
                            <i :class="item.icon"></i>{{ item.name }}
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <div class="welcome-header">
                    <h2>
                        <i class="fas fa-user-graduate"></i>
                        欢迎回来，{{ user.name }}
                    </h2>
                    <div class="class-selector">
                        <label for="class-select"><i class="fas fa-users"></i> 选择班级：</label>
                        <select id="class-select" v-model="selectedClass">
                            <option v-for="(cls, index) in classes" :key="index" :value="cls.id">
                                {{ cls.name }}
                            </option>
                        </select>
                    </div>
                </div>

                <!-- 班级管理 -->
                <div class="section">
                    <div class="section-header">
                        <h3><i class="fas fa-users"></i> 班级管理</h3>
                        <button class="action-btn" @click="createClass">
                            <i class="fas fa-plus-circle"></i> 创建新班级
                        </button>
                    </div>

                    <div class="class-grid">
                        <div class="class-card" v-for="(cls, index) in classes" :key="index">
                            <h4>{{ cls.name }}</h4>
                            <p><i class="fas fa-user-graduate"></i> 学生数: {{ cls.studentCount }}</p>
                            <p><i class="fas fa-flask"></i> 实验数: {{ cls.experimentCount }}</p>
                            <div class="class-meta">
                                <span class="status-badge" :class="{'status-submitted': cls.status === 'active'}">
                                    {{ cls.status === 'active' ? '活跃' : '归档' }}
                                </span>
                            </div>

                            <div class="class-actions">
                                <button @click="viewClass(cls.id)">
                                    <i class="fas fa-cog"></i> 管理
                                </button>
                                <button @click="uploadRoster(cls.id)">
                                    <i class="fas fa-upload"></i> 上传名单
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 实验批改 -->
                <div class="section">
                    <div class="section-header">
                        <h3><i class="fas fa-check-circle"></i> 待批改实验</h3>
                        <button class="action-btn" @click="refreshPendingReports">
                            <i class="fas fa-sync-alt"></i> 刷新列表
                        </button>
                    </div>

                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>学生姓名</th>
                                <th>学号</th>
                                <th>实验名称</th>
                                <th>提交时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(report, index) in pendingReports" :key="index">
                                <td>{{ report.studentName }}</td>
                                <td>{{ report.studentId }}</td>
                                <td>{{ report.experimentName }}</td>
                                <td>{{ report.submitTime }}</td>
                                <td>
                                    <span class="status-badge status-pending">
                                        {{ report.status }}
                                    </span>
                                </td>
                                <td>
                                    <button @click="gradeReport(report)">
                                        <i class="fas fa-check"></i> 批改
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="loading-container" v-if="loadingReports">
                        <div class="loading-spinner"></div>
                    </div>

                    <div v-if="pendingReports.length === 0 && !loadingReports" class="no-data">
                        <p>没有待批改的实验报告</p>
                    </div>
                </div>

                <!-- 成绩管理 -->
                <div class="section">
                    <div class="section-header">
                        <h3><i class="fas fa-chart-line"></i> 成绩管理</h3>
                        <button class="action-btn" @click="exportGrades">
                            <i class="fas fa-file-excel"></i> 导出成绩(Excel)
                        </button>
                    </div>

                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>班级</th>
                                <th>实验一</th>
                                <th>实验二</th>
                                <th>实验三</th>
                                <th>总分</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(student, index) in classGrades" :key="index">
                                <td>{{ student.id }}</td>
                                <td>{{ student.name }}</td>
                                <td>{{ student.class }}</td>
                                <td>
                                    <span class="grade-badge">{{ student.exp1 }}</span>
                                </td>
                                <td>
                                    <span class="grade-badge">{{ student.exp2 }}</span>
                                </td>
                                <td>
                                    <span class="grade-badge">{{ student.exp3 }}</span>
                                </td>
                                <td>
                                    <span class="grade-badge">{{ student.total }}</span>
                                </td>
                                <td>
                                    <button @click="viewStudentDetails(student)">
                                        <i class="fas fa-eye"></i> 详情
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                // 用户信息
                user: {
                    name: '张教授',
                    email: 'zhang@university.edu',
                    department: '计算机科学与技术学院',
                    initials: 'Z'
                },

                // 菜单项
                menuItems: [
                    { id: 'dashboard', name: '控制面板', icon: 'fas fa-tachometer-alt' },
                    { id: 'classes', name: '班级管理', icon: 'fas fa-users' },
                    { id: 'grading', name: '实验批改', icon: 'fas fa-check-circle' },
                    { id: 'grades', name: '成绩管理', icon: 'fas fa-chart-line' },
                    { id: 'experiments', name: '实验管理', icon: 'fas fa-flask' },
                    { id: 'settings', name: '系统设置', icon: 'fas fa-cog' }
                ],
                activeMenu: 'dashboard',
                isDropdownOpen: false,

                // 班级信息
                classes: [],
                loadingClasses: false,
                selectedClass: 'c1',

                // 待批改实验报告
                pendingReports: [],
                loadingReports: true,

                // 成绩数据
                classGrades: [
                    { id: 's2023001', name: '张三', class: '计算机科学2023级', exp1: 85, exp2: 90, exp3: 88, total: 263 },
                    { id: 's2023002', name: '李四', class: '计算机科学2023级', exp1: 78, exp2: 85, exp3: 92, total: 255 },
                    { id: 's2023003', name: '王五', class: '计算机科学2023级', exp1: 92, exp2: 88, exp3: 90, total: 270 },
                    { id: 's2023004', name: '赵六', class: '计算机科学2023级', exp1: 80, exp2: 75, exp3: 85, total: 240 },
                    { id: 's2023005', name: '钱七', class: '计算机科学2023级', exp1: 88, exp2: 90, exp3: 87, total: 265 }
                ],

                // 加载状态
                loading: false
            },

            computed: {
                // 用户首字母
                userInitials() {
                    return this.user.name ? this.user.name.charAt(0).toUpperCase() : 'T';
                },

                // 当前选择的班级文本
                selectedClassText() {
                    const selected = this.classes.find(cls => cls.id === this.selectedClass);
                    return selected ? selected.name : '未选择班级';
                }
            },

            created() {
                // 页面加载时从会话中获取用户信息
                this.loadUserFromSession();
                // 组件创建时获取待批改实验报告
                // this.fetchPendingReports();
                // 组件创建时获取班级信息
                this.loadClasses();

                // 检查URL参数，如果有新创建的班级，显示提示
                const urlParams = new URLSearchParams(window.location.search);
                if (urlParams.has('created')) {
                    alert('班级创建成功！');
                    // 重新加载班级列表
                    this.loadClasses();
                }
            },

            methods: {
                // 从会话中加载用户信息
                loadUserFromSession() {
                    // 兼容不同key的用户信息
                    let sessionUser = null;
                    if (sessionStorage.getItem('userInfo')) {
                        sessionUser = JSON.parse(sessionStorage.getItem('userInfo'));
                        this.user.name = sessionUser.name;
                        this.user.employeeId = sessionUser.id;
                        this.user.role = sessionUser.role;
                    }
                },

                async loadClasses() {
                    this.loading = true;
                    this.error = null;
                    try {
                        // 从本地存储获取 token
                        const token = localStorage.getItem('authToken') || sessionStorage.getItem('authToken');

                        if (!token) {
                            throw new Error('登录凭证已过期，请重新登录');
                        }

                        // 添加认证头
                        const response = await axios.get('/api/teacher/create-class', {
                            headers: {
                                Authorization: `Bearer ${token}`
                            }
                        });

                        try {
                            // 处理响应数据
                            this.classes = response.data.classes;
                            // 设置默认选中的班级
                            if (this.classes.length > 0) {
                                this.selectedClass = this.classes[0].id;
                            }

                        } catch (err) {
                            this.error = '无法加载实验数据: ' + (err.response?.data?.message || err.message);
                        } finally {
                            this.loading = false;
                        }
                    } catch (err) {
                        // 处理 401 错误
                        if (err.response?.status === 401) {
                            this.error = '登录已过期，请重新登录';
                            setTimeout(() => window.location.href = '/login.html', 5000);
                        } else {
                            this.error = '无法加载班级信息: ' + (err.response?.data?.message || err.message);
                        }
                    } finally {
                        this.loading = false;
                    }
                },

                // 从后端获取待批改实验报告
                fetchPendingReports() {
                    this.loadingReports = true;

                    // 使用axios模拟API请求
                    axios.get('/api/reports/pending')
                        .then(response => {
                            // 模拟数据
                            this.pendingReports = [
                                {
                                    id: 'r1', studentName: '张三', studentId: 's2023001',
                                    experimentName: '实验一：算法设计', submitTime: '2023-10-18 14:30', status: '待批改'
                                },
                                {
                                    id: 'r2', studentName: '李四', studentId: 's2023002',
                                    experimentName: '实验二：数据结构', submitTime: '2023-10-19 09:15', status: '待批改'
                                },
                                {
                                    id: 'r3', studentName: '王五', studentId: 's2023003',
                                    experimentName: '实验三：操作系统', submitTime: '2023-10-20 16:45', status: '待批改'
                                },
                                {
                                    id: 'r4', studentName: '赵六', studentId: 's2023004',
                                    experimentName: '实验一：算法设计', submitTime: '2023-10-21 11:20', status: '待批改'
                                }
                            ];
                        })
                        .catch(error => {
                            console.error('获取待批改报告失败:', error);
                            alert('获取数据失败，请重试');
                        })
                        .finally(() => {
                            this.loadingReports = false;
                        });
                },

                // 创建新班级
                createClass() {
                    window.location.href = 'create-class.html';
                },

                // 查看班级详情
                viewClass(classId) {
                    alert(`查看班级管理: ${classId}`);
                },

                // 上传名单
                uploadRoster(classId) {
                    alert(`上传名单: ${classId}`);
                },

                // 批改报告
                gradeReport(report) {
                    alert(`批改报告: ${report.studentName} - ${report.experimentName}`);
                },

                // 导出成绩
                exportGrades() {
                    this.loading = true;

                    // 使用axios模拟API请求
                    axios.get('/api/grades/export', {
                        params: {
                            classId: this.selectedClass
                        },
                        responseType: 'blob' // 用于文件下载
                    })
                        .then(response => {
                            // 创建下载链接
                            const url = window.URL.createObjectURL(new Blob([response.data]));
                            const link = document.createElement('a');
                            link.href = url;
                            link.setAttribute('download', `成绩单_${this.selectedClassText}.xlsx`);
                            document.body.appendChild(link);
                            link.click();

                            alert('成绩导出成功');
                        })
                        .catch(error => {
                            console.error('导出成绩失败:', error);
                            alert('导出成绩失败，请重试');
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                },

                // 刷新待批改报告列表
                refreshPendingReports() {
                    this.fetchPendingReports();
                },

                // 查看学生详情
                viewStudentDetails(student) {
                    alert(`查看学生详情: ${student.name}`);
                },

                // 设置活动菜单
                setActiveMenu(menuId) {
                    this.activeMenu = menuId;
                },

                // 切换下拉菜单
                toggleDropdown() {
                    this.isDropdownOpen = !this.isDropdownOpen;
                },

                // 编辑个人信息
                editProfile() {
                    alert('编辑个人信息功能');
                    this.closeDropdown();
                },
                // 修改密码
                changePassword() {
                    alert('修改密码功能');
                    this.closeDropdown();
                },

                // 关闭下拉菜单
                closeDropdown() {
                    this.isDropdownOpen = false;
                },

                // 退出登录
                logout() {
                    if (confirm('确定要退出系统吗？')) {
                        // 清除认证信息
                        localStorage.removeItem('authToken');
                        sessionStorage.removeItem('authToken');
                        // 重定向到登录页
                        window.location.href = '/index.html';
                    }
                }
            }
        });
    </script>
</body>

</html>